<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react作业</title>
    <style>
        .box{
				display: flex;
				width: 75rem;
				height: 37.5rem;
				margin: 0 auot;
				border: 10px solid black;
			}
			.box1,.box2,.box3{
				width: 25rem;
				height: 100%;
				display: flex;
				flex-direction: column;
			}
			.box1-1{
				background-color: aliceblue;
				height: 18.75rem;
				width: 100%;
			}
			.box1-2{
				background-color:pink;
				height: 18.75rem;
				width: 100%;
			}
			#box2-1{
				background-color: salmon;
				height:25rem;
				width: 100%;
			}
			#box2-2{
				display: flex;
				width:100%;
				height: 12.5rem;
			}
			.zuo{
				width: 50%;
				background-color: aqua;
			}
			.you{
				width: 50%;
				background-color: seagreen;
			}
			.box3-1,.box3-2,.box3-3{
				width:100%;
				height: 12.5rem;
				background-color: greenyellow;
			}
			.box3-2{
				background-color: lightblue;
			}
    </style>
</head>
<body>
    <div class="box">
        <div class="box1">
            <div class="box1-1"></div>
            <div class="box1-2"></div>
        </div>
        <div class="box2">
            <div id="box2-1"></div>
            <div id="box2-2">
                <div class="zuo"></div>
                <div class="you"></div>
            </div>
        </div>
        <div class="box3">
            <div class="box3-1"></div>
            <div class="box3-2"></div>
            <div class="box3-3"></div>
        </div>
    </div>
</body>
</html>